<template>
  <a-spin :spinning="loading">
    <a-form :form="form" @submit="handleSubmit" ref="formObject">
      <a-form-item v-bind="formItemLayout">
        <span slot="label">
          分类名称
        </span>
        <a-input v-decorator="formModel.name" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" extra="数值越大排序越靠前">
        <span slot="label">
          排序
        </span>
        <a-input-number v-decorator="formModel.sort" :min="1" :step="1" />
      </a-form-item>
      <a-form-item label="父级分类" v-bind="formItemLayout">
        <a-tree-select
          style="width: 150px"
          v-decorator="formModel.parent_id"
          allowClear
          :treeData="typeTree"
          placeholder="请选择类型"
          treeDefaultExpandAll
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="状态">
        <a-switch
          v-decorator="formModel.status"
          checkedChildren="启用"
          unCheckedChildren="禁用"
        ></a-switch>
      </a-form-item>
      <a-form-item
        label="是否作为父级"
        v-bind="formItemLayout"
        extra="如果选是只做别的分类的父级"
      >
        <a-switch
          v-decorator="formModel.is_parent"
          checkedChildren="是"
          unCheckedChildren="否"
        ></a-switch>
      </a-form-item>
      <a-form-item v-bind="tailFormItemLayout">
        <a-button type="primary" html-type="submit" :loading="loading">
          保存
        </a-button>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script>
import {
  fetchSelectTree,
  createGoodsType,
  updateGoodsType
} from "@/api/goodsType";
export default {
  data() {
    return {
      loading: true,
      typeTree: [],
      formModel: {
        name: [
          "name",
          {
            rules: [
              {
                required: true,
                message: "请输入昵称!",
                whitespace: true
              }
            ]
          }
        ],
        sort: [
          "sort",
          {
            rules: [
              {
                required: true,
                message: "请输入排序!"
              }
            ],
            initialValue: 1
          }
        ],
        parent_id: [
          "parent_id",
          {
            rules: [
              {
                required: true,
                message: "请选择父级分类",
                whitespace: true
              }
            ]
          }
        ],
        status: [
          "status",
          {
            required: true,
            valuePropName: "checked",
            initialValue: true
          }
        ],
        is_parent: [
          "is_parent",
          {
            required: true,
            valuePropName: "checked",
            initialValue: true
          }
        ]
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      }
    };
  },
  props: {
    model: {
      default: ""
    }
  },
  created() {
    this.fetchSelectTree();
    if (this.model && this.model.id > 0) {
      this.formModel.name[1].initialValue = this.model.name;
      this.formModel.status[1].initialValue = this.model.status ? true : false;
      this.formModel.is_parent[1].initialValue = this.model.is_parent
        ? true
        : false;
      this.formModel.parent_id[1].initialValue = this.model.parent_id + "";
    }
    this.form = this.$form.createForm(this);
    this.loading = false;
  },
  methods: {
    fetchSelectTree() {
      fetchSelectTree(true).then(res => {
        this.typeTree = [
          {
            is_parent: 1,
            value: "0",
            label: "顶级分类"
          },
          ...res.data
        ];
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          this.loading = true;
          if (this.model && this.model.id > 0) {
            //编辑
            updateGoodsType(values, this.model.id)
              .then(res => {
                this.loading = false;
                this.$emit("success", res);
              })
              .catch(error => {
                this.loading = false;

                this.$common.validateExtend(error, this.form);
              });
          } else {
            //添加
            createGoodsType(values)
              .then(res => {
                this.loading = false;
                this.$emit("success", res);
              })
              .catch(error => {
                this.loading = false;
                this.$common.validateExtend(error, this.form);
              });
          }
        }
      });
    }
  }
};
</script>
